﻿@inherits DemoWithResizableComponent

<div class="demo-description" id="ClearButton">
    <h2>
        <DemoNavLink Link="TextBox#ClearButton" />Text Box - Clear Button
    </h2>
    <p>
        Set the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxTextEditorBase.ClearButtonDisplayMode">ClearButtonDisplayMode</a> property to <b>Auto</b> to display the <b>Clear</b> button in the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxTextBox">Text Box</a> when it is not empty.
    </p>
    <p>
        Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.Base.DxTextEditorBase.NullText">NullText</a> property to display placeholder text in the Text Box when it is empty.
    </p>
</div>

<div class="card demo-card demo-card-shadow">
    <div class="card-header">
        <DemoToolbar @bind-SelectedSize="SizeMode" Title="Clear text"/>
    </div>
    <div class="card-body mw-480">
        <DxTextBox @bind-Text="@TextValue"
                   ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
                   BindValueMode="BindValueMode.OnInput"
                   NullText="Type text..."
                   SizeMode="SizeMode"></DxTextBox>
    </div>
</div>

<CodeSnippet_Editor_TextBox_ClearButton/>

@code {
    string TextValue { get; set; } = "Some text";
}
